<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="style3.css" rel="stylesheet" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<link rel="stylesheet" href="css/themes/first_mobile.css" />
  <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
</head>

<body>
<div data-role="page" >
<div data-role="header">
<h1> xia lin's map</h1>
<div data-role="navbar">
	<ul>
    	<a href="" >home</a>
        <a href="" >search</a>
        <a href="" >update</a>
    </ul>
	<ul>
    	<li> <button onclick="" > home </button></li>
        <li> <button onclick='receiveLocation();' > position</button></li>
        <li> <button onclick='init();'> show </button></li>
        <li> <a href="mobile_upLocation.html" t > update </a></li>
    </ul>
</div>
</div>

<div data-role="body">
	    <div id="container">i was a map^_^</div>  
</div>
 <div id="showPosition">okok</div>
<div data-role="footer">
copyright xia
</div>


</div>

</body>
 <script type="text/javascript">
// ajax
var wan_lati = '30.385571599';
var wan_longi = '111.46164325';
xmlHttp = new XMLHttpRequest();
getLocation();
function receiveLocation()
{
	xmlHttp.open('GET','position.php',true);
	xmlHttp.onreadystatechange=stateChange;
	xmlHttp.send(null);
	
}
function stateChange()
{
	if(xmlHttp.readyState==4&&xmlHttp.status==200)
	{
		name_from = xmlHttp.responseXML;
		$(name_from).find('page').find('position').each(function(){
			sessionStorage.latitude = $(this).find('latitude').text();
			sessionStorage.longitude = $(this).find('longitude').text();
			document.getElementById('showPosition').innerHTML=sessionStorage.latitude;
		});
	}
}
function init() {
	//set data of ceter position
	var position_myself = new qq.maps.LatLng(wan_lati,wan_longi)
	var center = new qq.maps.LatLng(sessionStorage.latitude,sessionStorage.longitude);
	
    var map = new qq.maps.Map(document.getElementById("container"), {
        // 地图的中心地理坐标。
        center: center,
        zoom: 17
    });

    
  //set the marker in your map
    var marker = new soso.maps.Marker({
        position: center,
        map: map
    	});
	var marker_myself = new soso.maps.Marker({
		position: position_myself,
		map: map
	});
		marker_myself.setMap(map);
	  	marker.setMap(map);
	  	marker.setClickable(true);

	 //set infoWindow frame	
    var info = new qq.maps.InfoWindow({
        map: map
    });
    //set the infomation to click
    qq.maps.event.addListener(marker,'click',function(){
    	 info.open(); 
         info.setContent('<div style="text-align:center;white-space:nowrap;'+
         'margin:10px;">xialin is there ^_^</div>');
         info.setPosition(center);
    	});
     qq.maps.event.addListener(marker_myself,'click',function(){
        	 info.open(); 
             info.setContent('<div style="text-align:center;white-space:nowrap;'+
             'margin:10px;">xiaoling is there ^_^</div>');
             info.setPosition(position_myself);
        });
     getRoute(map);
 }

function getRoute(map)
{
	var directionsService = new qq.maps.DrivingService({
        complete : function(response)
        {
            var start = response.detail.start,
                end = response.detail.end;
            
            var anchor = new qq.maps.Point(6, 6),
                size = new qq.maps.Size(24, 36),
                start_icon = new qq.maps.MarkerImage(
                    'img/busmarker.png', 
                    size, 
                    new qq.maps.Point(0, 0),
                    anchor
                ),
                end_icon = new qq.maps.MarkerImage(
                    'img/busmarker.png', 
                    size, 
                    new qq.maps.Point(24, 0),
                    anchor
                 );
            direction_routes = response.detail.routes;
            var route = direction_routes[0];

            
    		 polyline = new qq.maps.Polyline({
                         path: route.path,
                         strokeColor: '#3893F9',
                         strokeWeight: 6,
                         map: map
                     });
          	polyline.setMap(map);
     	}
	});
		directionsService.search(new qq.maps.LatLng(sessionStorage.latitude,sessionStorage.longitude), 
                    new qq.maps.LatLng(wan_lati,wan_longi));
        
}


</script>

</html>
